<template>
  <div>
    <p>username is {{ name }}</p>
    <p>password is {{ password }}</p>
    <button @click="change">change</button>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from 'vue'

const user = reactive({ name: '李华', password: 123 })
const { name, password } = toRefs(user)
const change = () => {
  user.name = 'admin'
  user.password = 123456
}
</script>

<style scoped></style>
